<!-- 首页一级页 -->
<template>
<scroll-view class="viewport" scroll-y enable-back-to-top>
  <!-- 顶部盒子S -->
  <view class="box">
<view class="box-l">
  <view class="dateTxt">
    2023-11
  </view>
</view>
<view class="box-r">
  <view class="weatherTxt">
    天气：晴
  </view>
  <view class="tem">
    18-28°C
    <image src="../../static/images/太阳.png" mode="" class="sun"></image>
  </view>
</view>

  </view>
  <!-- 顶部盒子E -->
  
  <!-- 内容盒子S -->
  <view class="detail-box">
    <!-- 状态盒子s-->
    <view class="state-box">
      <!-- 状态栏图片 -->
      <image src="../../static/images/stateImg.png" mode="" class="stateImg"></image>
      <!-- 状态栏文本 -->
      <view class="state">
        <view class="state-num" style="color: black;">
          45
        </view>
        <view class="state-tit">
          在线
        </view>
      </view>
      <view class="state">
        <view class="state-num">
          3
        </view>
        <view class="state-tit">
          离线
        </view>
      </view>
      <view class="state">
        <view class="state-num">
          0
        </view>
        <view class="state-tit">
          故障
        </view>
      </view>
    </view>
    <!-- 视频监控 -->
    <view class="tiandiBox">
      <view class="top">
        <view :class="[activeTab === index ? 'active' : '']" class="btn" @click="tabVideoUrl(item,index)" v-for="(item,index) in farmlandBtn"  :key="item.id">{{item.tit}}
        </view>
      </view>
      <view class="center">
        <div class="center-box">
          <!-- <video class="videoBox" src="https://open.ys7.com/v3/openlive/AA7447570_1_1.m3u8?expire=1703831635&id=660490620726460416&t=a875570b0b566d571e84b8f322b82e42f4a6d12b4923a99ff8ebb92a0ef0dfd6&ev=100" autoplay controls></video> -->
          <video class="videoBox" :src="VideoUrl" autoplay controls></video>
        </div>
      </view>
      <view class="bottom" @click="godetail()">
        查看详情
      </view>
    </view>
    
    <!-- 警报 -->
  <view class="warning">
    <view class="imgBox">
      <image src="../../static/icons/智慧消防-警报故障.png" class="warningIcon" mode=""></image>
    </view>
    <view class="warningTxt">
      2号田土壤湿度过低
    </view>
  </view>
  
  <!-- 兴农扶农 -->
  <view class="news">
    <view class="TitXnfn">
      兴农扶农
    </view>
    <view class="newsBox" v-for="item in news" :key="item.index">
      <view class="newsBox-l">
        <!-- 图片预留 -->
        <image :src="'data:image/png;base64,'+item.picture" mode=""></image>
      </view>
      <view class="newsBox-r">
        <view class="newsTit">
          {{item.title}}
        </view>
        <view class="newsText">
          {{item.content}}
        </view>
        <view class="newsTime">
          {{changeDate(item.createTime)}}
        </view>
      </view>
    </view>
  </view>
  
  </view>
  <!-- 内容盒子E -->
</scroll-view>
</template>

<script>
  import {getVideoUrlApi,getNewsApi} from '@/api/index.js'
export default {
    data() {
      return {
        farmlandBtn:[
          {tit:'梅林村稻田一区',id:1,deviceId:'AB5223890'},
          {tit:'梅林村稻田五区',id:2,deviceId:'AA7447616'},
        ],
        openDeviceId:'AB5223890',
        VideoDetailId:1,
         activeTab: 0,
         VideoUrl:'',
         news:{}
      }
    },
    methods:{
      // 
      godetail() {
        uni.navigateTo({
          url: `/pages/indexDetail/indexDetail?id=${this.VideoDetailId}`
        });
      },
      // 获取视频接口
      async getVideoUrl(deviceId) {
        const VideoUrl =  await getVideoUrlApi(deviceId)
        this.VideoUrl = VideoUrl
      },
       tabVideoUrl(res,index) {
        this.activeTab = index;
        this.VideoDetailId = res.id
        this.getVideoUrl(res.deviceId)
      },
      // 获取新闻接口
      async getNews() {
        const res = await getNewsApi()
        this.news = res
        console.log(res,'新闻接口');
      },
      changeDate(Time) {
        const newTime = new Date(Time)
        let year = newTime.getFullYear();
        let month = newTime.getMonth() + 1; // 月份是从 0 到 11 表示的，所以要加1
        let day = newTime.getDate();
        return `${year}-${month}-${day}`
      }
    },
 onUnload() {
    // 页面卸载时停止请求
    if (this.requestTask) {
      this.requestTask.abort()
    }
  },
    mounted() {
      this.getVideoUrl(this.openDeviceId)
      this.getNews()
    }
	}
</script>
<style lang="scss">
  page {
  height: 100%;
  overflow: hidden;
  // background-color: #f5faf9;
  background-color: #eff7f8;
  }
  
  .viewport {
  height: 100%;
  }
  // 顶部盒子 s
  .box {
    height: 300rpx;
    padding-top: 126rpx;
    padding-left: 56rpx;
    padding-right: 5rpx;
    background: linear-gradient(135deg, #80efb1 0%, #64c0b1 100%);
    border-radius: 0 0 9rpx 9rpx;
    display: flex;
    justify-content: space-between;
  }
  .box-l {
    .dateTxt {
      font-size: 38rpx;
      color: #fff;
      margin-bottom: 52rpx;
    }
    // 天气图标
    .sun {
      width: 60rpx;
      height: 60rpx;
      margin-left: 84rpx;
    }
    .tem {
      color: #fff;
    }
  }
  .box-r {
    // .bannerImg {
    //   width: 300rpx;
    //   height: 300rpx;
    // }
    // 天气图标
    .sun {
      width: 60rpx;
      height: 60rpx;
      margin-left: 84rpx;
    }
    .tem {
      color: #fff;
    }
  }
  // 顶部盒子e
  
// 内容部分样式
.detail-box {
  padding: 0 26rpx;
  height: 100%;
  width: 100%;
}
  // 状态盒子s
.state-box {
  margin-top: -10rpx;
  width: 698rpx;
  height: 178rpx;
  border-radius: 10rpx;
  padding: 0 44rpx ;
  background: linear-gradient(135deg, #c8fada 60%,#a1f0e6 100%);
  display: flex;
  justify-content: space-between;
  text-align: center;
  box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
  .state {
    margin-top: 56rpx;
    width: 80rpx;
    height: 80rpx;
    .state-num {
      font-size: 36rpx;
      color: red;
    }
    .state-tit {
      font-size: 26rpx;
      margin-top: 10rpx;
      color: #329182;
    }
  }
  .stateImg {
    width: 140rpx;
    height: 150rpx;
    margin-top: -40rpx;
  }
}
// 状态盒子 E


// 田地监控
.tiandiBox {
  width: 100%;
  height: 464rpx;
  text-align: center;
  background-color: #b4f4dd;
  margin-top: 51rpx;
  border-radius: 15rpx;
  .top {
     width: 100%;
     height: 64rpx;
     display: flex;
     line-height: 64rpx;
     font-size: 28rpx;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
     overflow: hidden;
    .btn {
      width: 50%;
      height: 64rpx;
      border-top-radius: 15rpx;
    }
    .btn.active {
      background-color: #64c0b1;
    } 

  }
  .center {
    width: 653rpx;
    height: 312rpx;
    margin: 10rpx auto;
    background-color: #fff;
    overflow: hidden;
    .videoBox {
      width: 100%;
      margin-top: -45rpx;
    }
  }
  .bottom {
    width: 180rpx;
    height: 50rpx;
    border-radius: 25rpx;
    margin: 20rpx auto;
    background-color: #eff7f8;
  }
  .bottom:hover {
    background-color: forestgreen;
  } 
}

// 警报盒子
.warning {
  width: 100%;
  height: 96rpx;
  margin-top: 64rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.2);
  display: flex;
  .imgBox {
   width: 80rpx;
   height: 100%;
   text-align: center;
   line-height: 120rpx;
   margin-right:20rpx ;
  }
  .warningIcon {
    width: 51rpx;
    height: 51rpx;
  }
  .warningTxt{
    color: red;
    line-height: 96rpx;
  }
}

.news {
  .TitXnfn {
    font-size: 30rpx;
    color: #329182;
    margin: 74rpx 0 20rpx;
    font-weight: 900;
  } 
  .newsBox {
    width: 100%;
    height: 266rpx;
    background-color: #fff;
    box-sizing: 5rpx 5rpx 5rpx rgba(0,0,0,0.3) ;
    display: flex;
    margin-bottom: 20rpx;
    .newsBox-l {
      width: 288rpx;
      height: 216rpx;
      margin: 18rpx 14rpx 28rpx 22rpx ;
      text-align: center;
      line-height: 216rpx;
      border: 1px solid #ccc;
      border-radius: 2%;
      box-sizing: 5rpx 5rpx 5rpx rgba(0,0,0,0.3) ;
      border-radius: 15rpx;
      image {
        width: 288rpx;
        height: 216rpx;
        overflow: hidden;
      }
    }
    .newsBox-r {
      margin-top: 30rpx;
      width: 350rpx;
      .newsTit {
        font-size: 32rpx;
        color: #329182;
        overflow-wrap: break-word;
      }
      .newsText {
        margin: 18rpx 0 35rpx;
        color: #9f9f9f;
        font-size: 26rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 显示 2 行 */
        overflow-wrap: break-word;
        overflow: hidden;
      }
      .newsTime {
        color: #9f9f9f;
        font-size: 20rpx;
      }
    }
  }
}

</style>